16778
16487 
Comencé un proyecto usando Express y Handlebars y luego me animaron a mirar Vue.js. Todavía estoy en la etapa de leer los documentos, pero hasta ahora no puedo entender cómo tener diseños, parciales y secciones en Vue.js. Creo que un parcial sería un componente, pero no sé cómo tener un diseño con parciales y secciones en las que pueda inyectar contenido.
Esto es lo que hago usando npm express-handlebars en un archivo llamado baselayout.hbs:



{{> global / headcode}} 
{{{_sections.pagemeta}}} 




{{> global / siteheader}} 




{{{body}}} 






{{> sitefooter}}
{{{_sections.pagescripts}}} 


¿Cómo podría configurar algo como lo anterior en Vue.js que también funcionaría con la representación del lado del servidor? Solo necesito un diseño base con componentes de encabezado / pie de página incluidos, pero también secciones en las que puede ir el contenido específico de la página.
2021-03-04 08:15:51 
Para SSR, debe mirar Nuxt.js, Vapper o uno de los otros marcos de SSR Vue.
Dicho esto, sí, usarías componentes para todo. Generalmente, tendría un componente para su diseño principal, luego uno para cada vista, luego componentes individuales para cada parcial / sección que luego importaría a sus vistas y / o diseño principal. Entonces, por ejemplo, según el código anterior:
El diseño de su aplicación principal:
// AppLayout.vue










Ejemplo de componente 'parcial':
// BaseContainer.vue




 {{content.title}} 







Componente de vista de ejemplo:
// MyView.vue








Luego, usaría vue-router para especificar qué componente de vista cargar en función de la URL actual.
3
|
Probablemente necesite utilizar componentes y ranuras dentro de sus componentes.
Sí, necesitas crear un componente para cada uno de tus parciales. Cada componente tendría una plantilla.
Entonces tendrás un componente principal que unirá todo esto. Usando los componentes más granulares que ya tiene (sus parciales).
Ahora, si la estructura de la plantilla (html para cada componente) proviene del servidor, entonces puede usar las ranuras https://vuejs.org/v2/guide/components-slots.html, que es una forma en que VueJs permite que los componentes reciban un marcado personalizado al crear instancias de los componentes (consulte el ejemplo en los documentos)
Para el diseño general y los componentes de la interfaz de usuario de su aplicación, es posible que desee consultar https://element.eleme.io/#/en-US/component/layout, que es una buena alternativa al Vuetify más popular.
2
|
Tu respuesta
StackExchange.ifUsing ("editor", function () {
StackExchange.using ("editor externo", función () {
StackExchange.using ("fragmentos", función () {
StackExchange.snippets.init ();
});
});
}, "fragmentos de código");
StackExchange.ready (function () {
var channelOptions = {
etiquetas: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("editor externo", función () {
// Debe activar el editor después de los fragmentos, si los fragmentos están habilitados
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("fragmentos", función () {
createEditor ();
});
}
demás {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: false,
heartbeatType: 'respuesta',
autoActivateHeartbeat: falso,
convertImagesToLinks: verdadero,
noModals: cierto,
showLowRepImageUploadWarning: true,
reputacionToPostImages: 10,
bindNavPrevention: verdadero,
sufijo: "",
imageUploader: {
brandingHtml: "Desarrollado por \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.725645.702728 469.4335 4.61182 46.725645.65251 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419C32.492 14.648.0394 342348 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5454.5C35.8 3520.49455C35.8 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ "d = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.45024.66231C28.9913 4.66231 28.4555 4.94978 28.1109 5.50789C27.499 4.86533 26.7335 4.56087 25.7005 4.56087C23.1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C13.69.16.1728 12,8854 28,1301 12,9342 0,1256 28,1301 27,2502 15,2321 12.983C28.1301 25.777 14.4373 15.2321C24.8349 15,2321 24,1352 14,9821 23,5661 22,8472 14,5218 14.7787C23.176 22.5437 14.6393 14.5218C21.7977 21.2429 15.0123 21.2429 14.5218 15.6887C21.2429 22.9072 17.6335 25.6622 16.7375 17.6335ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.1317 \ u003.95 "\ u003c7932Ze80 .8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98375 13.3609 5.88013C12.653 5.05154 11.6581 4.62866 10.3573 4.62866C9.34336 4.62866 8.57809 4.89931 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.0003.966 6.5902.896 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 13.8962 12.4044 13.8962C13.4375 13.87962. .4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d = \" M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0.313354 6.5049.3V211.954 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \ "/ \ u003e \ u003cpath d = \" M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822846 3.57676 1.87209 3 .57676C2.90056 3.57676 3.7234 2.87869 3.7234 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \" # 1BB76E \ "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e",
contentPolicyHtml: "Contribuciones de usuario con licencia de \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (política de contenido) \ u003c / a \ u003e",
allowUrls: verdadero
},
onDemand: verdadero,
discardSelector: ".discard-answer"
, inmediatamenteShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
¡Gracias por contribuir con una respuesta a Stack Overflow!
Asegúrese de responder la pregunta. ¡Proporcione detalles y comparta su investigación!
Pero evita ...
Pedir ayuda, aclaraciones o responder a otras respuestas.
Hacer declaraciones basadas en opiniones; respaldarlos con referencias o experiencia personal.
Para obtener más información, consulte nuestros consejos sobre cómo escribir buenas respuestas.
Borrador guardado
Borrador descartado
Regístrese o inicie sesión
StackExchange.ready (function () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Regístrese usando Google
Regístrese usando Facebook
Regístrese usando correo electrónico y contraseña
Enviar
Publicar como invitado
Nombre
Correo electrónico
Requerido, pero nunca mostrado
StackExchange.ready (
function () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f59119547% 2f what-is-the-vue-js-equivalente-de-express-handlebars-secciones% 23new-answer ',' question_page ');
}
);
Publicar como invitado
Nombre
Correo electrónico
Requerido, pero nunca mostrado
Publica tu respuesta
Descarte
Al hacer clic en "Publicar su respuesta", acepta nuestros términos de servicio, política de privacidad y política de cookies.
No es la respuesta que estás buscando? Lea otras preguntas etiquetadas javascript node.js vue.js handlebars.js express-handlebars o haga su propia pregunta.